import React from 'react';
import { Row, Col, Input, Switch, Button, Select } from 'antd';
import { compare } from '../../../../utils/compare';

export default function CodeReturnItem(props) {
  const itemValue = props.value || {};

  // 是否启用
  const changeEnabled = value => {
    itemValue.enabled = value;
    props.onChange && props.onChange(itemValue);
  };

  // 修改返回代码
  const handleChangeCode = e => {
    itemValue.code = e.target.value;
    props.onChange && props.onChange(itemValue);
  };

  // 修改返回信息
  const handleChangeMsg = e => {
    itemValue.msg = e.target.value;
    props.onChange && props.onChange(itemValue);
  };

  // 作用范围
  const handleSelectChange = value => {
    itemValue.scope = value;
    props.onChange && props.onChange(itemValue);
  };
  return (
    <>
      <Row type='flex' justify='space-between' align='middle' gutter={10} className='rule-item'>
        <Col span={2}>{props.index}</Col>
        <Col span={5}>
          <Select
            onChange={handleSelectChange}
            value={itemValue.scope}
            disabled={props.disabled}
            style={compare(props, 'scope')}
          >
            {Object.keys(props.codes).length > 0 &&
              props.codes.hit_return_code.map(item => {
                return (
                  <Select.Option value={item.code} key={item.code}>
                    {item.value}
                  </Select.Option>
                );
              })}
          </Select>
        </Col>
        <Col span={5}>
          <Input
            onChange={handleChangeCode}
            disabled={props.disabled}
            value={itemValue.code}
            style={compare(props, 'code')}
          />
        </Col>
        <Col span={6}>
          <Input
            onChange={handleChangeMsg}
            disabled={props.disabled}
            value={itemValue.msg}
            style={compare(props, 'msg')}
          />
        </Col>
        <Col span={3} style={compare(props, 'enabled')}>
          {!props.disabled ? (
            <Switch checked={itemValue.enabled === undefined ? true : itemValue.enabled} onChange={changeEnabled} />
          ) : itemValue.enabled === undefined ? (
            true
          ) : itemValue.enabled ? (
            '启用'
          ) : (
            '停用'
          )}
        </Col>
        {!props.disabled && (
          <Col span={3}>
            <Button type='link' onClick={() => props.onDel && props.onDel()}>
              删除
            </Button>
          </Col>
        )}
      </Row>
    </>
  );
}
